<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Props Management 嵌入示例</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f7fa;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: #2c3e50;
            color: white;
            padding: 20px;
        }

        .header h1 {
            margin: 0 0 10px 0;
            font-size: 24px;
        }

        .header p {
            margin: 0;
            color: #bdc3c7;
        }

        .content {
            padding: 20px;
        }

        .section {
            margin-bottom: 30px;
        }

        .section h2 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }

        .code-block {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 14px;
            overflow-x: auto;
            margin: 10px 0;
        }

        .btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin: 5px;
        }

        .btn:hover {
            background: #2980b9;
        }

        .params-form {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin: 10px 0;
        }

        .params-form label {
            display: inline-block;
            width: 100px;
            margin-right: 10px;
        }

        .params-form input {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
            margin: 5px;
        }

        #iframe-container {
            border: 2px solid #3498db;
            border-radius: 8px;
            padding: 10px;
            margin-top: 20px;
            background: #f8f9fa;
        }

        .tab-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .tab-button {
            background: #ecf0f1;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 4px;
        }

        .tab-button.active {
            background: #3498db;
            color: white;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 Props Management 嵌入示例</h1>
            <p>演示如何在任意网站中嵌入Props Management界面</p>
        </div>

        <div class="content">
            <div class="section">
                <h2>1. 直接获取iframe HTML代码</h2>
                <p>这种方式直接返回可以嵌入的iframe HTML代码：</p>
                
                <div class="tab-buttons">
                    <button class="tab-button active" onclick="showTab('method1')">HTML接口</button>
                    <button class="tab-button" onclick="showTab('method2')">JSON接口</button>
                </div>

                <div id="method1" class="tab-content active">
                    <div class="params-form">
                        <label>宽度:</label><input type="text" id="width1" value="100%" placeholder="100%">
                        <label>高度:</label><input type="text" id="height1" value="600px" placeholder="600px">
                        <label>边框:</label><input type="text" id="border1" value="1" placeholder="1">
                        <label>标题:</label><input type="text" id="title1" value="Props Management" placeholder="Props Management">
                        <br>
                        <button class="btn" onclick="loadIframe()">加载iframe</button>
                        <button class="btn" onclick="getHtmlCode()">获取HTML代码</button>
                    </div>

                    <div class="code-block" id="html-url">
                        GET: <span id="current-url"></span>/api/demo111/props-management/embed?width=100%&height=600px&border=1&title=Props+Management
                    </div>
                </div>

                <div id="method2" class="tab-content">
                    <div class="params-form">
                        <label>宽度:</label><input type="text" id="width2" value="100%" placeholder="100%">
                        <label>高度:</label><input type="text" id="height2" value="600px" placeholder="600px">
                        <label>边框:</label><input type="text" id="border2" value="1" placeholder="1">
                        <label>标题:</label><input type="text" id="title2" value="Props Management" placeholder="Props Management">
                        <br>
                        <button class="btn" onclick="getJsonCode()">获取JSON响应</button>
                    </div>

                    <div class="code-block" id="json-url">
                        GET: <span id="current-url2"></span>/api/demo111/props-management/embed-json?width=100%&height=600px&border=1&title=Props+Management
                    </div>

                    <div class="code-block" id="json-response" style="display: none;">
                        <pre id="json-content"></pre>
                    </div>
                </div>
            </div>

            <div class="section">
                <h2>2. 使用示例</h2>
                <p>以下是如何在你的网站中使用这个iframe接口：</p>

                <h3>A. 直接嵌入（推荐）</h3>
                <div class="code-block">
&lt;!-- 直接使用API返回的iframe代码 --&gt;
&lt;div id="props-management-container"&gt;&lt;/div&gt;

&lt;script&gt;
fetch('/api/demo111/props-management/embed?width=100%&height=500px')
    .then(response =&gt; response.text())
    .then(html =&gt; {
        document.getElementById('props-management-container').innerHTML = html;
    });
&lt;/script&gt;
                </div>

                <h3>B. 使用JSON接口</h3>
                <div class="code-block">
&lt;script&gt;
fetch('/api/demo111/props-management/embed-json?width=800px&height=600px')
    .then(response =&gt; response.json())
    .then(data =&gt; {
        if (data.success) {
            document.getElementById('container').innerHTML = data.iframeHtml;
            console.log('Props Management URL:', data.iframeUrl);
        }
    });
&lt;/script&gt;
                </div>

                <h3>C. 跨域调用</h3>
                <div class="code-block">
&lt;!-- 从外部网站调用 --&gt;
&lt;script&gt;
fetch('http://your-server.com:8080/api/demo111/props-management/embed-json', {
    mode: 'cors'
})
.then(response =&gt; response.json())
.then(data =&gt; {
    if (data.success) {
        document.body.innerHTML += data.iframeHtml;
    }
});
&lt;/script&gt;
                </div>
            </div>

            <div class="section">
                <h2>3. 实时预览</h2>
                <div id="iframe-container">
                    <p>点击上面的"加载iframe"按钮来预览效果</p>
                </div>
            </div>

            <div class="section">
                <h2>4. API参数说明</h2>
                <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                    <thead>
                        <tr style="background: #f8f9fa;">
                            <th style="border: 1px solid #ddd; padding: 10px; text-align: left;">参数</th>
                            <th style="border: 1px solid #ddd; padding: 10px; text-align: left;">默认值</th>
                            <th style="border: 1px solid #ddd; padding: 10px; text-align: left;">说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="border: 1px solid #ddd; padding: 10px;">width</td>
                            <td style="border: 1px solid #ddd; padding: 10px;">100%</td>
                            <td style="border: 1px solid #ddd; padding: 10px;">iframe宽度</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #ddd; padding: 10px;">height</td>
                            <td style="border: 1px solid #ddd; padding: 10px;">600px</td>
                            <td style="border: 1px solid #ddd; padding: 10px;">iframe高度</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #ddd; padding: 10px;">border</td>
                            <td style="border: 1px solid #ddd; padding: 10px;">1</td>
                            <td style="border: 1px solid #ddd; padding: 10px;">边框宽度（0为无边框）</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #ddd; padding: 10px;">title</td>
                            <td style="border: 1px solid #ddd; padding: 10px;">Props Management</td>
                            <td style="border: 1px solid #ddd; padding: 10px;">iframe标题</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 设置当前URL
        const currentUrl = window.location.origin;
        document.getElementById('current-url').textContent = currentUrl;
        document.getElementById('current-url2').textContent = currentUrl;

        function showTab(tabId) {
            // Hide all tabs
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active');
            });

            // Show selected tab
            document.getElementById(tabId).classList.add('active');
            event.target.classList.add('active');
        }

        function loadIframe() {
            const width = document.getElementById('width1').value || '100%';
            const height = document.getElementById('height1').value || '600px';
            const border = document.getElementById('border1').value || '1';
            const title = document.getElementById('title1').value || 'Props Management';

            const params = new URLSearchParams({
                width: width,
                height: height,
                border: border,
                title: title
            });

            fetch(`/api/demo111/props-management/embed?${params}`)
                .then(response => response.text())
                .then(html => {
                    document.getElementById('iframe-container').innerHTML = html;
                })
                .catch(error => {
                    document.getElementById('iframe-container').innerHTML = 
                        `<div style="color: red;">加载失败: ${error.message}</div>`;
                });
        }

        function getHtmlCode() {
            const width = document.getElementById('width1').value || '100%';
            const height = document.getElementById('height1').value || '600px';
            const border = document.getElementById('border1').value || '1';
            const title = document.getElementById('title1').value || 'Props Management';

            const params = new URLSearchParams({
                width: width,
                height: height,
                border: border,
                title: title
            });

            const url = `${currentUrl}/api/demo111/props-management/embed?${params}`;
            
            fetch(url)
                .then(response => response.text())
                .then(html => {
                    alert('HTML代码已复制到剪贴板！\n\nURL: ' + url + '\n\nHTML代码:\n' + html);
                    navigator.clipboard.writeText(html);
                })
                .catch(error => {
                    alert('获取失败: ' + error.message);
                });
        }

        function getJsonCode() {
            const width = document.getElementById('width2').value || '100%';
            const height = document.getElementById('height2').value || '600px';
            const border = document.getElementById('border2').value || '1';
            const title = document.getElementById('title2').value || 'Props Management';

            const params = new URLSearchParams({
                width: width,
                height: height,
                border: border,
                title: title
            });

            const url = `${currentUrl}/api/demo111/props-management/embed-json?${params}`;
            
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('json-content').textContent = JSON.stringify(data, null, 2);
                    document.getElementById('json-response').style.display = 'block';
                })
                .catch(error => {
                    document.getElementById('json-content').textContent = 'Error: ' + error.message;
                    document.getElementById('json-response').style.display = 'block';
                });
        }
    </script>
</body>
</html> 